<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .item{
      width: 300px;
      height: 200px;
      border: 1px solid green;
      display: inline-block;
      margin-left: 10px;
    }
  </style>
</head>
<body>
<div class="container">
  <h2 class="page-header">点击切换颜色</h2>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<script>
    // window.onload=function (){
        //获取div元素对象
        let items = document.getElementsByClassName('item');

        //遍历并绑定事件
        for (let i = 0; i,items.length;i++){
            items[i].onclick = function(){
                //修改当前元素的背景颜色
                items[i].style.background = 'pink';
                // this.style.background = 'pick';
            }
        }
    // }

</script>



</body>
</html>
